﻿<script setup lang="ts" name="Cropping">
import { storeToRefs } from 'pinia'
import { useUserStoreWithOut } from '@/store/modules/user'
import { useAppStoreWithOut } from '@/store/modules/app'
import { ProfileApi } from '@/api/system/user/profile'

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)
const userStore = useUserStoreWithOut()
const { user } = storeToRefs(userStore)

const CropperAvatarRef = ref()

const info = ref('')
const cropperImage = ref(user.value?.avatar || '')
const handleCropper = (obj) => {
  cropperImage.value = obj.value
  info.value = obj.imgInfo
}

const circleInfo = ref('')
const circleImage = ref(user.value?.avatar || '')
const handleCircleCropper = (obj) => {
  circleImage.value = obj.value
  circleInfo.value = obj.imgInfo
}

const handelUpload  = async ({ data }) => {
  const res = await ProfileApi.uploadAvatar({ avatarFile: data })
  CropperAvatarRef.value.close()
  if (user.value) {
    user.value.avatar = res.data
  }
}
</script>

<template>
  <PageWrap scroll>
    <el-space :size="systemConfig.space" fill>
      <el-row :gutter="systemConfig.space">
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>头像裁剪</span>
              </div>
            </template>
            <CropperAvatar ref="CropperAvatarRef" width="240px" :value="user?.avatar" @change="handelUpload" />
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="systemConfig.space">
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>矩形裁剪</span>
              </div>
            </template>
            <div class="cropper-panel">
              <CropperWrap :value="cropperImage" :circled="false" @fileChange="handleCropper" />
              <p v-if="cropperImage">裁剪后图片信息：{{ info }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="systemConfig.space">
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>圆形裁剪</span>
              </div>
            </template>
            <div class="cropper-panel">
              <CropperWrap :value="circleImage" :circled="true" @fileChange="handleCircleCropper" />
              <p v-if="circleImage">裁剪后图片信息：{{ circleInfo }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-space>
  </PageWrap>
</template>

<style scoped lang="scss">
.el-space {
  display: block;
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-card {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: center;

    .cropper-panel {
      flex: 1;

      p {
        margin-top: 20px;
      }
    }
  }
}
</style>
